﻿<div>
    <Divider Orientation="DividerOrientation.Left">sub-element align left</Divider>
    <GridRow Justify="RowJustify.Start">
        <GridCol Span="4">col-4</GridCol>
        <GridCol Span="4">col-4</GridCol>
        <GridCol Span="4">col-4</GridCol>
        <GridCol Span="4">col-4</GridCol>
    </GridRow>

    <Divider Orientation="DividerOrientation.Left">sub-element align center</Divider>
    <GridRow Justify="RowJustify.Center">
        <GridCol Span="4">col-4</GridCol>
        <GridCol Span="4">col-4</GridCol>
        <GridCol Span="4">col-4</GridCol>
        <GridCol Span="4">col-4</GridCol>
    </GridRow>

    <Divider Orientation="DividerOrientation.Left">sub-element align right</Divider>
    <GridRow Justify="RowJustify.End">
        <GridCol Span="4">col-4</GridCol>
        <GridCol Span="4">col-4</GridCol>
        <GridCol Span="4">col-4</GridCol>
        <GridCol Span="4">col-4</GridCol>
    </GridRow>


    <Divider Orientation="DividerOrientation.Left">sub-element monospaced arrangement</Divider>
    <GridRow Justify="RowJustify.SpaceBetween">
        <GridCol Span="4">col-4</GridCol>
        <GridCol Span="4">col-4</GridCol>
        <GridCol Span="4">col-4</GridCol>
        <GridCol Span="4">col-4</GridCol>
    </GridRow>


    <Divider Orientation="DividerOrientation.Left">sub-element align full</Divider>
    <GridRow Justify="RowJustify.SpaceAround">
        <GridCol Span="4">col-4</GridCol>
        <GridCol Span="4">col-4</GridCol>
        <GridCol Span="4">col-4</GridCol>
        <GridCol Span="4">col-4</GridCol>
    </GridRow>
</div>

<style>
    #components-grid-demo-flex [class~='ant-row'] {
        background: rgba(128, 128, 128, 0.08);
    }
</style>